<template>
	<view>
		<view class="title flex align-center justify-center font-lg font-weight-bold">
			欢迎回来
		</view>
		<view class="login-form px-3">
			<input class="uni-input rounded" type="text" v-model="form.username" placeholder="手机号/用户名/邮箱" />
			<input class="uni-input rounded" type="safe-password" v-model="form.password" placeholder="请输入密码" />
		</view>
		<view class="px-3">
			<main-button>登 录</main-button>
		</view>
		<view class="flex align-center justify-center w-100">
			<view class="line"></view>
			<view class="title text-muted px-3">社交账号登录</view>
			<view class="line"></view>
		</view>
		<view class="oauth-login flex  px-3 text-muted">
			<view class="oauth-login-item flex align-center justify-center bg-light rounded-circle" hover-class="bg-hover-light">
				<text class="iconfont iconweixin font-lg"></text>
			</view>
			<view class="oauth-login-item flex align-center justify-center bg-light rounded-circle" hover-class="bg-hover-light">
				<text class="iconfont iconQQ font-lg"></text>
			</view>
			<view class="oauth-login-item flex align-center justify-center bg-light rounded-circle" hover-class="bg-hover-light">
				<text class="iconfont iconxinlangweibo font-lg"></text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form:{
					username:'',
					password:''
				}
			};
		}
	}
</script>

<style lang="scss">
.title {
	margin: 110rpx 0;
}
.uni-input {
	background-color: #f2f2f2;
	margin-bottom: 48rpx;
}
.line {
	width: 100rpx;
	height: 1rpx;
	background-color: #d7d7d7;
}
.oauth-login-item {
	width: 100rpx;
	height: 100rpx;
	margin: 0 70rpx;
}
</style>
